<template>
  <el-row class="user-appeal-page">
    <el-col :span="5">&nbsp;</el-col>

    <!-- 中间内容 -->
    <el-col :span="14" class="">
      <el-card shadow="hover" class="risk">
        <div slot="header">
          <span class="title">禁用原因</span>
        </div>
        <el-form label-width="85px">
          <el-form-item label="方式">
            <el-input :value="riskTypeFormat"></el-input>
          </el-form-item>
          <el-form-item label="原因">
            <el-input
              type="textarea"
              rows="3"
              resize="none"
              :value="userRisk.riskReason">
            </el-input>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card shadow="hover" class="appeal">
        <div slot="header">
          <span class="title">申诉表单</span>

          <span @click="openUserAppealDialogHandle" :class="{ 'load': buttonLoad }" class="appeal-list">申诉记录</span>
        </div>
        <el-form :model="userAppealForm" :rules="userAppealRules" ref="userAppealForm" label-width="85px">
          <el-form-item label="申诉内容" prop="appealDesc">
            <el-input
              v-model="userAppealForm.appealDesc"
              type="textarea"
              placeholder="请输入申诉内容"
              rows="10"
              maxlength="1000"
              resize="none"
              show-word-limit
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button :disabled="buttonLoad" type="primary" @click="submitAppealFormHandle">提交</el-button>
            <el-tooltip effect="light" content="关闭申诉页面" placement="right">
              <el-button @click="closeUserAppealHandle">关闭</el-button>
            </el-tooltip>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>

    <el-col :span="5">
      <!-- 用户申诉记录列表弹出框 -->
      <user-appeal-list ref="userAppealListDialog" />
    </el-col>
  </el-row>
</template>

<script>
  import UserAppealList from "@/components/user/appeal/list/list.vue";

  export default {
    layout: 'default',
    name: "user-appeal-index",
    components: { UserAppealList },
    data() {
      return {
        // 用户风控对象
        userRisk: {
          // 风控主键
          riskRecordId: undefined,
          // 风控类型[0-管理员操作 1-系统判定]
          riskType: '',
          // 风控原因
          riskReason: undefined,
        },
        // 用户申诉表单对象
        userAppealForm: {
          // 风控主键
          riskRecordId: undefined,
          // 申诉内容
          appealDesc: undefined,
        },
        // 按钮是否可点击[true-可点击 false-不可点击]
        buttonLoad: false,
        // 用户申诉表单校验规则
        userAppealRules: {
          appealDesc: [
            { required: true, message: '申诉内容不能为空', trigger: 'blur' }
          ],
        },
      }
    },
    computed: {
      /**
       * 用户风控类型枚举映射
       * @returns {string} 用户风控类型文字描述
       */
      riskTypeFormat() {
        switch (this.userRisk.riskType) {
          case 0:
            return '管理员操作'
          case 1:
            return '系统判定'
          default:
            return '未知风控类型'
        }
      },
    },
    created() {
      if (process.client) {
        let params = this.$route.params
        if (!params.hasOwnProperty('data')) {
          // 跳转到404页面
          this.$router.push('/error/404')
          return
        }
        if (params.hasOwnProperty('mode')) {
          // 请求后台获取风控内容
          this.getUserRisk(params.data)
        } else {
          // 不包含mode属性值，则说明进入页面的方式，不是通过登录页面执行申诉登录进来的
          this.$confirm('您已被禁用，是否要进行申诉？', '操作提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              // 请求后台获取风控内容
              this.getUserRisk(params.data)
            })
            .catch(() => {

              this.clearUserLogin()

              // 回到首页面
              this.$router.push('/')
            })
        }
      }
    },
    methods: {
      /**
       * 获取用户风控信息方法
       * @param {string} riskRecordId 风控id
       */
      getUserRisk(riskRecordId) {
        // 按钮不可点击
        this.buttonLoad = true

        this.$axios.$get('/index/user/risk', { params: { riskRecordId }})
          .then(({ data }) => {
            let userRisk = this.userRisk
            userRisk.riskRecordId = riskRecordId
            userRisk.riskType = data.riskType
            userRisk.riskReason = data.riskReason
          })
          .catch(() => {})
          .finally(() => {
            // 按钮恢复可点击
            this.buttonLoad = false
          })
      },
      /**
       * 提交用户申诉表单事件
       */
      submitAppealFormHandle() {
        this.$refs.userAppealForm.validate((valid) => {
          if (!valid) {
            return false
          }
          // 按钮不可点击
          this.buttonLoad = true

          let userAppealForm = this.userAppealForm
          userAppealForm.riskRecordId = this.userRisk.riskRecordId
          this.$axios.$post('/index/save/appeal', userAppealForm)
            .then((data) => {
              if (data.data) {
                this.notify('success', '温馨提示', data.msg)

                this.$confirm('是否要离开这个页面？', '提示', {
                  confirmButtonText: '离开',
                  cancelButtonText: '留下',
                  type: 'success'
                }).then(() => {

                  // TODO 根据Vuex存储的前一个路由信息，跳转回前一个路由
                  this.$router.push('/')

                }).catch(() => {});
              } else {
                this.notify('success', '温馨提示', '申诉内容提交成功')
              }
            })
            .catch(() => {})
            .finally(() => {
              // 按钮恢复可点击
              this.buttonLoad = false
            })
        })
      },
      /**
       * 打开用户申诉记录弹出框事件
       */
      openUserAppealDialogHandle() {
        this.$refs.userAppealListDialog.initUserAppealList(this.userRisk.riskRecordId)
      },
      /**
       * 关闭用户申诉页面
       */
      closeUserAppealHandle() {
        this.$confirm('您确定取消申诉，离开申诉页面吗，这会影响您的正常使用, 是否离开?', '提示', {
          confirmButtonText: '留下',
          cancelButtonText: '离开',
          type: 'warning'
        }).then(() => {
          this.notify('', '温馨提示', '已取消’关闭‘操作，您可以继续申诉操作。')
        }).catch(() => {

          this.clearUserLogin()

          // TODO 根据Vuex存储的前一个路由信息，跳转回前一个路由
          this.$router.push('/')
        });
      },
      /**
       * 清空用户登录信息及cookie内容
       */
      clearUserLogin() {
        this.$cookies.remove("userId")
        this.$cookies.remove("username")
        this.$cookies.remove("avatar")
        this.$cookies.remove("token")
        this.$store.commit('user/setUserId', '')
        this.$store.commit('user/setUsername', '')
        this.$store.commit('user/setAvatar', '')
        this.$store.commit('user/setStatus', false)
      }
    }
  }
</script>

<style scoped>
  .user-appeal-page {
    min-height: calc(100vh - 120px);
  }
  .user-appeal-page .risk {
    margin-top: 30px;
  }
  .user-appeal-page .risk .title {
    font-size: 15px;
    font-weight: bold;
  }
  .user-appeal-page .appeal {
    margin-top: 10px;
    margin-bottom: 30px;
  }
  .user-appeal-page .appeal .title {
    font-size: 15px;
    font-weight: bold;
  }
  .user-appeal-page .appeal .appeal-list {
    margin-left: 10px;
    font-size: 14px;
    cursor: pointer;
    color: #CCCCCC;
  }
  .user-appeal-page .appeal .appeal-list:hover {
    color: black;
  }
  .user-appeal-page .appeal .load {
    pointer-events: none;
  }
</style>
